<template>
  <div class="app-container">
    <div v-if="isShow">
      <avue-crud
        :option="option"
        ref="crud"
        :data="data"
        :table-loading="loading"
        :page.sync="page"
        @on-load="onLoad"
        @current-change="currentChange"
        @row-del="rowDel"
        @search-change="searchChange"
        @search-reset="resetChange"
      >
      </avue-crud>
    </div>
    <auth-upload
      v-if="!isShow"
      @goBack="goBack"
      :bankOptions="bankOptions"
    ></auth-upload>
  </div>
</template>

<script>
import {
  getAuthMngList,
  getCmpBankInfo,
  delCmpFile,
  addAuth,
  delAuth,
  submitAuth,
  updateAuth,
  searchAuthById,
  allDownArea,
} from '@/api/manager.js'
import { qyxxLikeQuery } from '@/api/portay'
import { mapGetters } from 'vuex'
import axios from 'axios'
import pdf from 'vue-pdf'
import auth from './auth'
import authUpload from './auth_upload'
import mixin from './mixin'
export default {
  components: {
    auth,
    pdf,
    authUpload,
  },
  mixins: [mixin],
  computed: {
    ...mapGetters(['token']),
  },
  data() {
    return {
      isShow: true,
      loading: false,
      searchLoading: false,
      form: {},
      dataList: {},
      editDataList: {},
      checkDataList: {},
      bankOptions: [],
      searchList: {},
      uploadTemplateDialog: false,
      fileList: [],
      editFileList: [],
      checkFileList: [],
      comBankId: undefined,
      authId: undefined,
      headers: undefined,
      uploadUrl: '',
      uploadLoading: false,
      acceptFileType: '.png,.jpg,.pdf',
      downLoadLoading: false,
      checkLoading: false,
      editLoading: false,
      dialogWidth: '',
      dialogImageUrl: '',
      dialogVisible: false,
      dialogVisiblePdf: false,
      dialogImageUrl1: '',
      dialogVisible1: false,
      dialogVisiblePdf1: false,
      numPages: '',
      pdfUrl: '',
      addSaveLoading: false,
      addSubmitLoading: false,
      editSaveLoading: false,
      editSubmitLoading: false,
      /* 分页 */
      page: {
        pageSize: 10,
        pageSizes: [10, 20, 30, 40, 50, 100],
        pagerCount: 5,
        layout: 'total, sizes, prev, pager, next, jumper',
        currentPage: 1,
        total: 0,
        background: false,
      },
      authFlgStatus: false,
      // 显示窗口
      openDialog: false,
      title: '新增',
      show: false,
      basicinfo: 'first',
      data: [],
      selectionList: [],
      option: {
        menu: false,
        headerAlign: 'center',
        align: 'center',
        border: true,
        rowKey: 'authId',
        selection: false,
        reserveSelection: true,
        selectable: (row, index) => {
          return row.authFlg === '1'
        },
        indexWidth: 100,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        labelWidth: 135,
        viewBtn: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        selectClearBtn: false,
        searchShowBtn: false,
        searchLabelWidth: '20%',
        menuWidth: 150,
        searchSpan: 8,
        searchMenuSpan: 4,
        column: [
          {
            label: '企业名称',
            prop: 'companyName',
            display: false,
            search: true,
            overHidden: true,
          },
          {
            label: '社会统一信用代码',
            prop: 'shtyxydm',
            display: false,
            search: true,
            searchLabelWidth: '35%',
          },
          {
            label: '法人姓名',
            prop: 'fddbr',
            width: 100,
            display: false,
          },
          {
            label: '授权渠道',
            prop: 'bank',
            display: false,
            search: true,
            width: 130,
            type: 'select',
            dicData: [],
          },
          {
            label: '创建时间',
            prop: 'createTime',
            display: false,
          },
          {
            label: '日期范围',
            prop: 'daterange',
            type: 'datetimerange',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            display: false,
            search: true,
            searchRange: true,
            hide: true,
          },
          {
            label: '状态',
            prop: 'authFlg',
            display: false,
            search: true,
            searchSpan: 8,
            searchLabelWidth: '35%',
            width: 100,
            type: 'select',
            dicData: [
              {
                label: '待提交',
                value: '0',
              },
              {
                label: '授权成功',
                value: '1',
              },
              {
                label: '审批中',
                value: '2',
              },
              {
                label: '授权失败',
                value: '3',
              },
              {
                label: '批处理授权中',
                value: '4',
              },
            ],
          },
        ],
      },
      /* 配置弹窗 */
      box: false,
      editBox: false,
      checkBox: false,
      customerLoading: false,
      handleType: 'add',
      customerForm: {},
      customerPage: {
        page: 1,
        size: 5,
        total: 0,
      },
      /* 已选中 客户经理 */
      customerSelectionList: [],
      customerData: [],
      customerOption: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        indexWidth: 100,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        menu: false,
        selection: false,
        reserveSelection: false,
        dialogDrag: false,
        columnBtn: false,
        refreshBtn: false,
        selectClearBtn: false,
        searchShowBtn: false,
        column: [
          {
            label: '工号',
            prop: 'eid',
          },
          {
            label: '姓名',
            prop: 'userName',
          },
          {
            label: '性别',
            prop: 'userGender',
            type: 'select',
            dicData: [
              {
                label: '男',
                value: false,
              },
              {
                label: '女',
                value: true,
              },
            ],
          },
          {
            label: '联系方式',
            prop: 'userPhone',
          },
          {
            label: '所属部门',
            prop: 'province',
          },
        ],
      },
    }
  },
  filters: {
    bankFilter(val, option) {
      if (!val) return ''
      return (
        option.filter((item) => item.value == val).map((ite) => ite.label)[0] ||
        val
      )
    },
  },
  created() {
    this.getDict()
  },
  methods: {
    querySearchAsync(queryString, cb) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        if (queryString) {
          qyxxLikeQuery({ field: queryString.trim() }).then((res) => {
            this.restaurants = res.data.map((item) => {
              return {
                value: item.qymc + '（' + item.shtyxydm + '）',
                shtyxydm: item.shtyxydm,
                qymc: item.qymc,
              }
            })
            cb(this.restaurants)
          })
        }
      }, 1000 * Math.random())
    },
    async getDict() {
      const dataSQQD = await this.$store.dispatch('asyncApi/getDict', {
        code: 'SQQD',
      })
      this.bankOptions = dataSQQD
      this.option.column[3].dicData = dataSQQD
    },
    onLoad(page, params = {}) {
      /* Object.assign(params, {
                  pageNum: this.page.currentPage,
                  pageSize: this.page.pageSize
              }) */
      let searchList = this.searchList
      Object.assign(params, {
        ...searchList,
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      })
      /* if (page) {
                  Object.assign(params, {
                      ...query,
                      pageNum: this.page.currentPage,
                      pageSize: this.page.pageSize
                  });
              } else {
                  Object.assign(params, page);
              } */
      this.loading = true
      getAuthMngList(params).then((data) => {
        if (data.status) {
          this.loading = false
          this.data = data.data.records
          this.page.total = data.data.total
        }
      })
    },
    /* 清空 */
    resetChange() {
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {}
      this.onLoad()
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      done()
      this.page.currentPage = 1
      this.page.pageSize = 10
      if (params.daterange) {
        params.startTime = params.daterange[0]
        params.endTime = params.daterange[1]
      }
      params.daterange = []
      this.searchList = {
        ...params,
      }
      this.onLoad()
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    customerChange(i) {
      this.customerPage.currentPage = i
    },
    /* 选中回调 */
    selectionChange(list) {
      this.selectionList = list
    },
    /* 打开新增 */
    handleGrant() {
      this.dialogWidth = '30%'
      this.box = true
      this.form = {}
      this.show = false
      this.dataList = []
      this.fileList = []
    },
    /* 下载授权协议 */
    handelDownLoad() {
      let authIds = this.selectionList.map((item) => item.authId).join(',')
      let curTime = new Date()
      let MM =
        curTime.getMonth() + 1 > 9
          ? curTime.getMonth() + 1
          : '0' + (curTime.getMonth() + 1)
      let DD =
        curTime.getDate() > 9 ? curTime.getDate() : '0' + curTime.getDate()
      let hh =
        curTime.getHours() > 9 ? curTime.getHours() : '0' + curTime.getHours()
      let mm =
        curTime.getMinutes() > 9
          ? curTime.getMinutes()
          : '0' + curTime.getMinutes()
      let ss =
        curTime.getSeconds() > 9
          ? curTime.getSeconds()
          : '0' + curTime.getSeconds()
      let time = `${MM}${DD}${hh}${mm}${ss}`
      this.downLoadLoading = true
      allDownArea(authIds)
        .then((data) => {
          this.downLoadLoading = false
          const url = URL.createObjectURL(data.data)
          const link = document.createElement('a')
          document.body.appendChild(link)
          link.download = '授权协议-' + time + '.zip'
          link.href = url
          link.click()
          document.body.removeChild(link)
          URL.revokeObjectURL(url)
        })
        .catch((error) => {
          this.downLoadLoading = false
          this.$message({ message: error.message, type: 'error' })
        })
    },
    /* 批量上传授权协议 */
    handleUpload() {
      this.isShow = false
    },
    goBack() {
      this.isShow = true
    },
    /* 删除 */
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delOrg({
          id: row.id,
        }).then(() => {
          this.onLoad(this.page, this.searchList)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
      })
    },
    /* 提交 */
    saveAuth(row) {
      this.$confirm('确定提交?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        submitAuth({
          id: row.authId,
        }).then((data) => {
          if (data.status) {
            this.onLoad(this.page, this.searchList)
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    deleteAuth(row) {
      this.$confirm('确定删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delAuth({
          id: row.authId,
        }).then((data) => {
          if (data.status) {
            this.onLoad(this.page, this.searchList)
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },

    //打开编辑
    handelEdit(row) {
      let params = {
        id: row.authId,
      }
      this.authId = row.authId
      this.editLoading = true
      this.editBox = true
      this.editFileList = []
      searchAuthById(params).then((res) => {
        if (res.status) {
          this.editLoading = false
          this.editDataList = res.data
          this.editFileList = res.data.fileList
          /* res.data.fileList.map(item=>{
                          this.run(item.base64Code,res.data.printBk,item.id,item.name)
                      }); */
          this.comBankId = res.data.comBankId
          this.headers = { TOKEN: this.token }
          this.uploadUrl =
            process.env.VUE_APP_BASE_API +
            '/qyxx/authorize/updateUploadFile?comBankId=' +
            this.comBankId
        }
      })
    },

    //打开查看
    handelCheck(row) {
      let params = {
        id: row.authId,
      }
      this.authFlgStatus = row.authFlg == '3' ? true : false
      this.checkFileList = []
      this.checkLoading = true
      this.checkBox = true
      searchAuthById(params).then((res) => {
        this.checkLoading = false
        if (res.status) {
          this.checkDataList = res.data
          res.data.fileList.forEach((item) => {
            this.run(item.base64Code, res.data.printBk, item.id)
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 添加水印1
    async run(imgUrl, markText, id, name) {
      // 1.图片路径转成canvas
      const tempCanvas = await this.imgToCanvas(imgUrl)
      // 2.canvas添加水印
      //const markText = '我是水印'
      const canvas = this.addWatermark(tempCanvas, markText)
      // 3.canvas转成img
      const img = this.convasToImg(canvas)
      // 查看效果
      if (this.editBox) {
        this.editFileList.push({ url: img.src, id: id, name: name })
      } else if (this.checkBox) {
        this.checkFileList.push(img.src)
      }
    },
    onSearch(item) {
      this.show = false
      if (!item.shtyxydm) {
        this.$message.error('请输入企业的统一社会信用代码')
        return false
      }

      let params = {
        qyshxydm: item.shtyxydm,
      }
      this.searchLoading = true
      getCmpBankInfo(params).then((res) => {
        this.searchLoading = false
        if (res.status) {
          this.dialogWidth = '55%'
          this.show = true
          this.dataList = res.data
          /* this.comBankId = res.data.comBankId;
                      this.headers = {TOKEN:this.token};
                      this.uploadUrl = process.env.NODE_ENV == 'production' ? process.env.VUE_APP_BASE_API  + "/qyxx/authorize/uploadCmpFile?comBankId="+this.comBankId : '/api2/qyxx/authorize/uploadCmpFile?comBankId='+this.comBankId; */
        } else if (res.code != '401' && !res.status) {
          this.$message({
            message: `${res.msg}`,
            type: 'errpr',
          })
          return
        }
      })
    },

    //暂存
    saveNow() {
      let params = {}
      if (this.box) {
        //新增暂存
        if (!this.dataList.bank) {
          this.$message({
            type: 'warning',
            message: '请选择授权渠道!',
          })
          return
        }
        params = {
          shtyxydm: this.dataList.shtyxydm,
          bank: this.dataList.bank,
          status: '0',
        }
        this.addSaveLoading = true
        addAuth(params).then((res) => {
          if (res.status) {
            //this.box = false;
            this.headers = { TOKEN: this.token }
            this.comBankId = res.data
            if (this.fileList.length > 0) {
              let formData = new FormData() // FormData 对象
              this.fileList.forEach((file) => {
                formData.append('file', file.raw)
              })
              let url =
                process.env.VUE_APP_BASE_API +
                '/qyxx/authorize/uploadCmpFile?comBankId=' +
                this.comBankId
              let config = {
                headers: {
                  'Content-Type': 'multipart/form-data',
                  TOKEN: this.token,
                },
              }
              axios.post(url, formData, config).then((res) => {
                if (res.data.status) {
                  this.$message({
                    type: 'success',
                    message: '操作成功!',
                  })
                  this.onLoad(this.page, this.searchList)
                  this.box = false
                  this.addSaveLoading = false
                } else {
                  this.addSaveLoading = false
                  this.$message({
                    type: 'error',
                    message: `${res.data.msg}`,
                  })
                }
              })
            } else {
              this.onLoad(this.page, this.searchList)
              this.box = false
              this.addSaveLoading = false
            }
          } else {
            this.addSaveLoading = false
            this.$message({
              type: 'error',
              message: `${res.msg}`,
            })
          }
        })
      } else if (this.editBox) {
        //编辑暂存
        if (!this.editDataList.bank) {
          this.$message({
            type: 'warning',
            message: '请选择授权渠道!',
          })
          return
        }
        let fileIds = this.editFileList
          .map((item) => {
            if (item.id) {
              return item.id
            }
          })
          .join(',')
        params = {
          authId: this.authId,
          bank: this.editDataList.bank,
          status: '0',
          fileIds: fileIds,
        }
        this.editSaveLoading = true
        updateAuth(params).then((res) => {
          if (res.status) {
            if (this.editFileList.length > 0) {
              let isNull = false
              let formData = new FormData() // FormData 对象
              this.editFileList.forEach((file) => {
                if (file.raw) {
                  isNull = true
                  formData.append('file', file.raw)
                }
              })
              //判断是否有新上传的文件
              if (!isNull) {
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                })
                this.editSaveLoading = false
                this.editBox = false
                this.onLoad(this.page, this.searchList)
              } else {
                let url = this.uploadUrl
                let config = {
                  headers: {
                    'Content-Type': 'multipart/form-data',
                    TOKEN: this.token,
                  },
                }
                axios.post(url, formData, config).then((res) => {
                  if (res.data.status) {
                    this.$message({
                      type: 'success',
                      message: '操作成功!',
                    })
                    this.editSaveLoading = false
                    this.editBox = false
                    this.onLoad(this.page, this.searchList)
                  } else {
                    this.editSaveLoading = false
                    this.$message({
                      type: 'error',
                      message: `${res.data.msg}`,
                    })
                  }
                })
              }
            } else {
              this.onLoad(this.page, this.searchList)
              this.editBox = false
              this.editSaveLoading = false
            }
          } else {
            this.editSaveLoading = false
            this.$message({
              type: 'error',
              message: `${res.msg}`,
            })
          }
        })
      }
    },
    //提交
    submit() {
      let params = {}
      if (this.box) {
        //新增提交
        if (!this.dataList.bank) {
          this.$message({
            type: 'warning',
            message: '请选择授权渠道!',
          })
          return
        }
        params = {
          shtyxydm: this.dataList.shtyxydm,
          bank: this.dataList.bank,
          status: '2',
        }
        this.addSubmitLoading = true
        addAuth(params).then((res) => {
          if (res.status) {
            this.headers = { TOKEN: this.token }
            this.comBankId = res.data
            if (this.fileList.length > 0) {
              let formData = new FormData() // FormData 对象
              this.fileList.forEach((file) => {
                formData.append('file', file.raw)
              })
              let url =
                process.env.VUE_APP_BASE_API +
                '/qyxx/authorize/uploadCmpFile?comBankId=' +
                this.comBankId
              let config = {
                headers: {
                  'Content-Type': 'multipart/form-data',
                  TOKEN: this.token,
                },
              }
              axios.post(url, formData, config).then((res) => {
                if (res.data.status) {
                  this.$message({
                    type: 'success',
                    message: '操作成功!',
                  })
                  this.onLoad(this.page, this.searchList)
                  this.box = false
                  this.addSubmitLoading = false
                } else {
                  this.addSubmitLoading = false
                  this.$message({
                    type: 'error',
                    message: `${res.data.msg}`,
                  })
                }
              })
            } else {
              this.onLoad(this.page, this.searchList)
              this.box = false
              this.addSubmitLoading = false
            }
          } else {
            this.addSubmitLoading = false
            this.$message({
              type: 'error',
              message: `${res.msg}`,
            })
          }
        })
      } else if (this.editBox) {
        //编辑提交
        if (!this.editDataList.bank) {
          this.$message({
            type: 'warning',
            message: '请选择授权渠道!',
          })
          return
        }
        let fileIds = this.editFileList
          .map((item) => {
            if (item.id) {
              return item.id
            }
          })
          .join(',')
        params = {
          authId: this.authId,
          bank: this.editDataList.bank,
          status: '2',
          fileIds: fileIds,
        }
        this.editSubmitLoading = true
        updateAuth(params).then((res) => {
          if (res.status) {
            if (this.editFileList.length > 0) {
              let isNull = false
              let formData = new FormData() // FormData 对象
              this.editFileList.forEach((file) => {
                if (file.raw) {
                  isNull = true
                  formData.append('file', file.raw)
                }
              })
              //判断是否有新上传的文件
              if (!isNull) {
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                })
                this.editSubmitLoading = false
                this.editBox = false
                this.onLoad(this.page, this.searchList)
              } else {
                let url = this.uploadUrl
                let config = {
                  headers: {
                    'Content-Type': 'multipart/form-data',
                    TOKEN: this.token,
                  },
                }
                axios.post(url, formData, config).then((res) => {
                  if (res.data.status) {
                    this.$message({
                      type: 'success',
                      message: '操作成功!',
                    })
                    this.editSubmitLoading = false
                    this.editBox = false
                    this.onLoad(this.page, this.searchList)
                  } else {
                    this.editSubmitLoading = false
                    this.$message({
                      type: 'error',
                      message: `${res.data.msg}`,
                    })
                  }
                })
              }
            } else {
              this.onLoad(this.page, this.searchList)
              this.editBox = false
              this.editSubmitLoading = false
            }
          } else {
            this.editSubmitLoading = false
            this.$message({
              type: 'error',
              message: `${res.msg}`,
            })
          }
        })
      }
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handleRemove1(file, fileList) {
      this.editFileList = fileList
    },
    getPdfUrl(file) {
      let url = URL.createObjectURL(file.raw) //将文件转化成url
      let loadingTask = pdf.createLoadingTask(url)
      loadingTask.promise.then((pdf) => {
        this.numPages = pdf.numPages
        // console.log(this.numPages);pdf总页数
      })
      return url
    },
    Previewf(file) {
      if (file) {
        const addTypeArray = file.name.split('.')
        const addType = addTypeArray[addTypeArray.length - 1]
        if (addType === 'pdf') {
          this.pdfUrl = this.getPdfUrl(file)
          this.dialogVisiblePdf = true
        } else if (['png', 'jpg', 'jpeg'].includes(addType)) {
          this.dialogImageUrl = file.base64Code || URL.createObjectURL(file.raw)
          this.dialogVisible = true
          //window.open(file.response);
        }
      }
    },
    Previewf1(file) {
      if (file) {
        const addTypeArray = file.name.split('.')
        const addType = addTypeArray[addTypeArray.length - 1]
        if (addType === 'pdf') {
          this.pdfUrl = this.getPdfUrl(file)
          this.dialogVisiblePdf1 = true
        } else if (['png', 'jpg', 'jpeg'].includes(addType)) {
          this.dialogImageUrl1 =
            file.base64Code || URL.createObjectURL(file.raw)
          this.dialogVisible1 = true
          //window.open(file.response);
        }
      }
    },
    handelChange(file, fileList) {
      const fileFamart = file.name.split('.')[file.name.split('.').length - 1]
      if (
        fileFamart !== 'jpg' &&
        fileFamart !== 'png' &&
        fileFamart !== 'pdf'
      ) {
        this.$message.warning('必须上传jpg、png或pdf格式的文件!')
        this.$refs.addManageUpload.handleRemove(file)
        return
      }
      const isLt8M = file.size / 1024 / 1024 < 8
      if (!isLt8M) {
        this.$message.error('上传图片大小不能超过 8MB!')
        this.$refs.addManageUpload.handleRemove(file)
        return
      }
      if (
        isLt8M &&
        (fileFamart == 'jpg' || fileFamart == 'png' || fileFamart == 'pdf')
      ) {
        this.fileList = fileList
      }
    },
    handelChange1(file, fileList) {
      const fileFamart = file.name.split('.')[file.name.split('.').length - 1]
      if (
        fileFamart !== 'jpg' &&
        fileFamart !== 'png' &&
        fileFamart !== 'pdf'
      ) {
        this.$message.warning('必须上传jpg、png或pdf格式的文件!')
        this.$refs.editManageUpload.handleRemove(file)
        return
      }
      const isLt8M = file.size / 1024 / 1024 < 8
      if (!isLt8M) {
        this.$message.error('上传图片大小不能超过 8MB!')
        this.$refs.editManageUpload.handleRemove(file)
        return
      }
      if (
        isLt8M &&
        (fileFamart == 'jpg' || fileFamart == 'png' || fileFamart == 'pdf')
      ) {
        this.editFileList = fileList
      }
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
/deep/ .el-upload-list__item {
  transition: none !important;
}
.dialog-footer {
  text-align: center;
  margin: 20px auto;
}
.title {
  font-weight: 900;
}
.module .uplaod {
  width: 500px;
}
.detailtable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: #e5e5e5 solid 1px;
}
.detailtable tr {
  width: 100%;
}
.detailtable td {
  padding: 8px 10px;
  text-align: left;
  line-height: 24px;
  font-size: 14px;
  color: #434343;
  border: #e5e5e5 solid 1px;
}
.detailtable td {
  font-weight: normal;
  background-color: #fff;
}
.detailtable td {
  word-break: break-all;
}
/deep/ .row {
  display: flex;
  justify-content: space-between;
}
</style>
